<template>
  <el-container>
    <!--左侧-->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">动力CRM客户管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="rgb(51, 65, 87)"
          :default-active="routerIndexPath"
          text-color="#fff"
          :router="true"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          style="border-right: solid 0px">

        <el-sub-menu :index="index" v-for="(menu, index) in loginUser.menuPermissionList" :key="menu.id">
          <template #title>
            <el-icon><component :is="menu.icon"></component></el-icon>
            <span>{{menu.name}}</span>
          </template>

          <el-menu-item :index="subMenu.url" v-for="subMenu in menu.permissionList" :key="subMenu.id">
            <el-icon><component :is="subMenu.icon"></component></el-icon>
            {{subMenu.name}}
          </el-menu-item>

        </el-sub-menu>

      </el-menu>
    </el-aside>

    <!--右侧-->
    <el-container class="rightContainer">
      <!--头部-->
      <el-header>
        <el-icon @click="menuShow" style="cursor:pointer;" v-if="isCollapse"><Expand /></el-icon>
        <el-icon @click="menuShow" style="cursor:pointer;" v-else><Fold /></el-icon>
        <el-dropdown style="float: right; line-height: 38px;">
          <span class="el-dropdown-link">
            {{ loginUser.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--内容体-->
      <el-main>
        <!--
        根据router.js里面的路由配置，动态显示页面，
        比如：你访问斜杆/dashboard/user，那么此处就显示UserView.vue页面
             你访问/dashboard/activity，那么此处就显示ActivityView.vue页面
        -->
        <router-view v-if="isRouterAlive"/>
      </el-main>

      <!--尾部-->
      <el-footer>
        @版权所有 动力节点 版本号:1.1.0.bate 北京市通州区顺景总部公元
      </el-footer>
    </el-container>

  </el-container>
</template>

<script>
import {messageConfirm, messageTip, removeJwt} from "@/util/util";
import {doGet} from "@/http/httpRequest";

export default {
  name: "DashboardView",

  //页面上使用的变量都需要再data()中定义
  data() {
    return {
      //登录人对象
      loginUser : {},
      //定义主页面右侧内容体区域是否显示，true显示，false不显示
      isRouterAlive : true,
      //当前展开的菜单路由地址
      routerIndexPath : '',
      //控制左侧菜单的展开和折叠，true是折叠，false是展开
      isCollapse : false
    }
  },

  //定义一个provide()函数，提供者
  provide() {
    return {
      //提供了一个reload()函数（一隐藏，一显示，达到右侧内容刷新的目的）
      reload : () => {
        this.isRouterAlive = false; //右侧内容就不显示了（隐藏了）
        //$nextTick是Vue的另一个生命周期函数：
        //当你修改完数据（数据更新了）之后，Vue帮你操作完DOM之后，把真实的DOM放入页面了（Dom更新渲染），
        //Vue再帮我们调用这个函数（可以监听DOM元素被修改后，在该函数中写你要执行的逻辑）。
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      },

      //提供一个对象
      user : {id : 1208, name : '张三丰'},

      //提供一个字符串
      description : '这是vue的provide/inject组合实现页面刷新',

      //提供一个数字
      age : 22,

      //提供一个数组
      idArray : [1082, 2091, 3090, 2386]
    }
  },

  //页面渲染后执行该函数钩子
  mounted() {
    //加载登录人信息
    this.loadLoginUser();
    //激活当前展开的菜单路由地址
    this.activeRouterIndexPath();
  },

  //页面上的js函数都写在 methods :属性里面
  methods : {
    //退出登录
    logout() {
      doGet("/api/logout", {}).then(resp => {
        if (resp.data.code === 200) {
          //删除前端存储的jwt
          removeJwt();
          //退出成功
          messageTip("退出成功", "success");
          //跳转到登录页
          window.location.href = "/";
        } else {
          //提示一下，是否需要强制退出
          messageConfirm("退出失败，是否强制退出？").then(() => { //点“确定”就执行then()函数
            //前台浏览器把jwt删除一下
            removeJwt();
            //跳转到登录页
            window.location.href = "/";
          }).catch(() => { //点“取消”就执行catch()函数
            messageTip("取消强制退出", "warning");
          })
        }
      })
    },

    //加载登录人信息
    loadLoginUser() {
      doGet("/api/login/info", {}).then(resp => {
        if (resp.data.code === 200) {
          this.loginUser = resp.data.data;
        }
      })
    },

    //激活当前展开的菜单路由地址
    activeRouterIndexPath() {
      //  /dashboard/user
      //  /dashboard/activity
      //  /dashboard/activity/detail/1
      let currentRouterPath = this.$route.path;
      //  /dashboard/user   -->  ['', 'dashboard', 'user' ]
      //  /dashboard/activity      -->  ['', 'dashboard', 'activity' ]
      //  /dashboard/activity/detail/1   -->  ['', 'dashboard', 'activity', 'detail', '1' ]
      let pathArr = currentRouterPath.split("/");
      if (pathArr.length > 3) {
        this.routerIndexPath = "/" + pathArr[1] + "/" + pathArr[2];
      } else {
        this.routerIndexPath = currentRouterPath;
      }
    },

    //左侧菜单的展开和折叠
    menuShow() {
      this.isCollapse = !this.isCollapse;
    }
  }
}
</script>

<style scoped>
.el-aside {
  background: black;
}
.rightContainer {
  height: calc(100vh);
}
.el-header {
  background: azure;
  height: 38px;
  line-height: 38px;
}
.el-footer {
  background: aliceblue;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
.menuTitle {
  color: greenyellow;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
</style>